<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数独求解器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .cell-input {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 1.5rem;
            border: none;
            outline: none;
            background: transparent;
        }
        .sudoku-grid {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            gap: 1px;
            background: #333;
            border: 2px solid #333;
        }
        .cell {
            aspect-ratio: 1;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .cell:nth-child(3n) {
            border-right: 2px solid #333;
        }
        .cell:nth-child(9n) {
            border-right: none;
        }
        .cell:nth-child(n+19):nth-child(-n+27),
        .cell:nth-child(n+46):nth-child(-n+54) {
            border-bottom: 2px solid #333;
        }
        .loading {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .success-message {
            color: #10B981; /* green-500 */
            padding: 0.5rem;
            border-radius: 0.5rem;
            background-color: #ECFDF5;
            border: 1px solid #10B981;
            display: inline-flex;
            align-items: center;
            margin: 0.25rem;
        }
        .error-message {
            color: #EF4444; /* red-500 */
            padding: 0.5rem;
            border-radius: 0.5rem;
            background-color: #FEF2F2;
            border: 1px solid #EF4444;
            display: inline-flex;
            align-items: center;
            margin: 0.25rem;
        }
        .info-message {
            color: #3B82F6; /* blue-500 */
            padding: 0.5rem;
            border-radius: 0.5rem;
            background-color: #EFF6FF;
            border: 1px solid #3B82F6;
            display: inline-flex;
            align-items: center;
            margin: 0.25rem;
        }
        .warning-message {
            color: #F59E0B; /* amber-500 */
            padding: 0.5rem;
            border-radius: 0.5rem;
            background-color: #FFFBEB;
            border: 1px solid #F59E0B;
            display: inline-flex;
            align-items: center;
            margin: 0.25rem;
        }
        /* 统一提示信息样式 */
        .status-message {
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 100%;
            min-height: 3rem;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            font-weight: 500;
            box-sizing: border-box;
            text-align: left;
            background-color: #f8f9fa;
        }
        
        #hintArea {
            width: 100%;
            max-width: 100%;
        }
        
        @media (max-width: 768px) {
            .status-message {
                width: 100%;
                max-width: 100%;
                padding: 0.5rem;
                font-size: 0.875rem;
            }
        }
        
        @media (max-width: 480px) {
            .status-message {
                width: 100%;
                max-width: 100%;
                padding: 0.5rem;
                font-size: 0.75rem;
            }
        }
        
        /* Toast 样式 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            min-width: 400px;
            max-width: 600px;
            padding: 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            font-size: 1.1rem;
        }
        
        .toast.show {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
        
        .toast.success {
            background-color: #ECFDF5;
            color: #10B981;
            border: 1px solid #10B981;
        }
        
        .toast.error {
            background-color: #FEF2F2;
            color: #EF4444;
            border: 1px solid #EF4444;
        }
        
        .toast.info {
            background-color: #EFF6FF;
            color: #3B82F6;
            border: 1px solid #3B82F6;
        }
        
        .toast.warning {
            background-color: #FFFBEB;
            color: #F59E0B;
            border: 1px solid #F59E0B;
        }
        
        /* 确保预览图片和网格尺寸一致 */
        .preview-container, #sudokuBoard {
            width: 450px;
            height: 450px;
        }
        
        @media (max-width: 768px) {
            .preview-container, #sudokuBoard {
                width: 360px;
                height: 360px;
            }
        }
        
        @media (max-width: 480px) {
            .preview-container, #sudokuBoard {
                width: 270px;
                height: 270px;
            }
        }
        
        /* 行列标记样式优化 */
        .row-label, .col-label {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            color: #9ca3af; /* text-gray-400 浅灰色 */
        }
        
        .row-label {
            width: 1.25rem;
            height: 3.12rem;
            font-size: 0.875rem;
            margin-right: 0.125rem;
        }
        
        .col-label {
            width: 3rem;
            #height: 1rem;
            font-size: 0.875rem;
            margin-bottom: 0;
            padding-bottom: 0.125rem;
        }
        
        @media (max-width: 768px) {
            .row-label, .col-label {
                font-size: 0.75rem;
            }
            
            .row-label {
                width: 1rem;
                height: 2.5rem;
            }
            
            .col-label {
                width: 2.5rem;
                height: 0.875rem;
                padding-bottom: 0.125rem;
            }
        }
        
        @media (max-width: 480px) {
            .row-label, .col-label {
                font-size: 0.625rem;
            }
            
            .row-label {
                width: 0.75rem;
                height: 2rem;
            }
            
            .col-label {
                width: 2rem;
                height: 0.75rem;
                padding-bottom: 0.125rem;
            }
        }
        
        /* 返回首页按钮 */
        .back-to-home {
            position: absolute;
            top: 1rem;
            left: 1rem;
            z-index: 10;
            background-color: #3b82f6;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-weight: 500;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: background-color 0.2s;
        }
        
        .back-to-home:hover {
            background-color: #2563eb;
        }
        
        .back-to-home i {
            margin-right: 0.5rem;
        }
        
        /* 手动录入按钮样式 */
        .manual-input-btn {
            cursor: pointer;
            display: inline-block;
        }
        .manual-input-btn:hover {
            text-decoration: underline;
        }
        
        /* 添加脉冲动画 */
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .animate-pulse-border {
            animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        /* 统一模式选择按钮样式 */
        .mode-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            border: 2px dashed #d1d5db;
            border-radius: 0.5rem;
            background-color: #f9fafb;
            cursor: pointer;
            transition: all 0.2s;
            width: 100%;
            max-width: 450px;
        }
        
        .mode-btn:hover {
            background-color: #f3f4f6;
            border-color: #9ca3af;
        }
        
        .mode-btn.active {
            background-color: #eff6ff;
            border-style: solid;
            border-color: #3b82f6;
        }
        
        .mode-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        
        /* 子标题样式 */
        .subtitle {
            font-size: 0.875rem;
            color: #6b7280; /* text-gray-500 */
            margin-top: 0.5rem;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <!-- Toast 容器 -->
    <div id="toastContainer" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-md"></div>
    
    <div class="container mx-auto px-2 py-8 max-w-6xl">
        <h1 class="text-4xl font-bold text-center text-gray-800 mb-8 pt-4">数独求解器</h1>
        
        <div class="bg-white rounded-xl shadow-xl p-6 mb-8">
            <!-- 提示信息显示区域 -->
            <div id="hintArea" class="text-left mb-4 w-full hidden">
                <div id="statusMessage" class="status-message w-full"></div>
            </div>
            <!-- 模式选择区域 -->
            <div class="mb-8">
                <h2 class="text-2xl font-bold text-center text-gray-800 mb-6" id="modeTitle">选择输入方式</h2>
                <div class="flex flex-col md:flex-row justify-center gap-6">
                    <!-- 手动输入模式 -->
                    <div id="manualModeBtn" class="mode-btn">
                        <div class="mode-icon text-blue-500">
                            <i class="fas fa-table"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">手动输入数独</h3>
                        <p class="text-gray-600 text-center">点击网格直接输入数独题目</p>
                        <p class="subtitle">请手动输入数独数字</p>
                    </div>
                    
                    <!-- 图片识别模式 -->
                    <div id="imageModeBtn" class="mode-btn">
                        <div class="mode-icon text-green-500">
                            <i class="fas fa-camera"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">图片识别数独</h3>
                        <p class="text-gray-600 text-center">上传包含数独的图片自动识别</p>
                        <p class="subtitle">上传包含数独的图片</p>
                    </div>
                </div>
            </div>
            
            <!-- 返回首页按钮 -->
            <button id="backToHomeBtn" class="back-to-home hidden">
                <i class="fas fa-arrow-left"></i>返回首页
            </button>
            
            <!-- 数独网格和操作区域 -->
            <div id="sudokuSection" class="hidden">
                <!-- 提示信息显示区域已移至页面顶部 -->
                
                <div class="flex flex-col md:flex-row justify-center gap-4 mb-6">
                    
                    <!-- 图片预览区域 -->
                    <div id="imagePreviewWrapper" class="flex flex-col items-center" style="display: none;">
                        <h3 class="text-lg mb-0 text-gray-700">上传图片预览</h3>
                        <!-- 列标记占位 (1-9) -->
                        <div class="flex">
                            <div class="row-label"></div>
                            <div class="flex">
                                <!-- 9个列标记占位 -->
                                <div class="col-label"></div>
                                <div class="col-label"></div>
                                <div class="col-label"></div>
                                <div class="col-label"></div>
                                <div class="col-label"></div>
                                <div class="col-label"></div>
                                <div class="col-label"></div>
                                <div class="col-label"></div>
                                <div class="col-label"></div>
                            </div>
                        </div>
                        <img id="previewImage" class="preview-container border-2 border-gray-300 rounded-lg shadow-md" src="" alt="预览图片" style="display: none;" />
                        <div id="imagePreviewContainer" class="hidden">
                            <div class="preview-container border-2 border-gray-300 rounded-lg shadow-md overflow-hidden mx-auto"></div>
                        </div>
                    </div>
                    
                    <!-- 数独网格 -->
                    <div id="sudokuGridContainer" class="flex flex-col items-center">
                        
                        <h3 class="text-lg mb-0 text-gray-700">数独网格 <span id="difficultyDisplay" class="text-sm text-gray-500">难度: 未知</span></h3>
                        <div class="flex flex-col">
                            <!-- 列标记 (1-9) -->
                            <div class="flex">
                                <div class="row-label"></div>
                                <div class="flex">
                                    <!-- 9个列标记 -->
                                    <div class="col-label">1</div>
                                    <div class="col-label">2</div>
                                    <div class="col-label">3</div>
                                    <div class="col-label">4</div>
                                    <div class="col-label">5</div>
                                    <div class="col-label">6</div>
                                    <div class="col-label">7</div>
                                    <div class="col-label">8</div>
                                    <div class="col-label">9</div>
                                </div>
                            </div>
                            
                            <!-- 行标记 (A-I) 和网格 -->
                            <div class="flex">
                                <div class="flex flex-col">
                                    <!-- 9个行标记 -->
                                    <div class="row-label">A</div>
                                    <div class="row-label">B</div>
                                    <div class="row-label">C</div>
                                    <div class="row-label">D</div>
                                    <div class="row-label">E</div>
                                    <div class="row-label">F</div>
                                    <div class="row-label">G</div>
                                    <div class="row-label">H</div>
                                    <div class="row-label">I</div>
                                </div>
                                <div id="sudokuBoard" class="grid grid-cols-9 gap-0 shadow-lg border-2 border-gray-800">
                                    <!-- 网格单元格将由JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div id="operationButtons" class="flex flex-col items-center justify-center">
                        <div class="flex flex-col gap-2 w-full">
                            <button type="button" id="generateBtn" class="px-3 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-lg hover:from-purple-600 hover:to-indigo-700 transition-all shadow font-medium text-sm hidden">
                                <i class="fas fa-random mr-1"></i>随机生成
                            </button>
                            <button type="button" id="solveBtn" class="px-3 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-lg hover:from-green-600 hover:to-emerald-700 transition-all shadow font-medium text-sm">
                                <i class="fas fa-calculator mr-1"></i>求解
                            </button>
                            <button type="button" id="clearBtn" class="px-3 py-2 bg-gradient-to-r from-red-500 to-rose-600 text-white rounded-lg hover:from-red-600 hover:to-rose-700 transition-all shadow font-medium text-sm">
                                <i class="fas fa-eraser mr-1"></i>清空
                            </button>
                            <button type="button" id="checkBtn" class="px-3 py-2 bg-gradient-to-r from-amber-500 to-orange-600 text-white rounded-lg hover:from-amber-600 hover:to-orange-700 transition-all shadow font-medium text-sm">
                                <i class="fas fa-check-circle mr-1"></i>检查错误
                            </button>
                            <button type="button" id="settingsBtn" class="px-3 py-2 bg-gradient-to-r from-gray-600 to-slate-700 text-white rounded-lg hover:from-gray-700 hover:to-slate-800 transition-all shadow font-medium text-sm">
                                <i class="fas fa-cog mr-1"></i>设置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 图片上传区域 -->
            <div id="imageUploadSection" class="hidden">
                <div class="flex flex-col items-center">
                    
                    
                    <!-- 上传图片识别区域 -->
                    <div id="uploadArea">
                        <h3 class="text-xl font-medium mb-4 text-gray-800 text-center">上传包含数独的图片</h3>
                        <div class="flex flex-col items-center">
                            <label for="file-upload" class="mode-btn mb-4">
                                <div class="mode-icon text-blue-500">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </div>
                                <h3 class="text-xl font-semibold mb-2">选择图片文件</h3>
                                <p class="text-gray-600 text-center">支持 JPG, PNG 格式</p>
                            </label>
                            <input id="file-upload" type="file" class="hidden" accept="image/*">
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="stepControls" class="hidden text-center py-6">
                <div class="flex justify-center items-center gap-6">
                    <button id="prevStepBtn" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg hover:from-blue-600 hover:to-indigo-700 transition-all shadow-md font-medium">
                        <i class="fas fa-arrow-left mr-2"></i>上一步
                    </button>
                    <span id="stepCounter" class="text-xl font-bold bg-gray-100 px-6 py-3 rounded-lg shadow">步骤 0/0</span>
                    <button id="nextStepBtn" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg hover:from-blue-600 hover:to-indigo-700 transition-all shadow-md font-medium">
                        下一步<i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>
            
            <input type="file" id="imageInput" accept="image/*" class="hidden">
        </div>
    </div>
    
    <script src="sudoku-solver.js"></script>
    <script src="image-processing.js"></script>
    <script src="app.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log("页面加载完成");
            
            // 模式选择按钮事件
            const manualModeBtn = document.getElementById('manualModeBtn');
            const imageModeBtn = document.getElementById('imageModeBtn');
            const sudokuSection = document.getElementById('sudokuSection');
            const imageUploadSection = document.getElementById('imageUploadSection');
            const modeSelection = document.querySelector('.flex.flex-col.md\\:flex-row.justify-center.gap-6');
            const fileUpload = document.getElementById('file-upload');
            const previewImage = document.getElementById('previewImage');
            const imagePreviewContainer = document.getElementById('imagePreviewContainer');
            const generateBtn = document.getElementById('generateBtn'); // 获取随机生成按钮
            
            console.log("元素查找完成", {
                manualModeBtn,
                imageModeBtn,
                sudokuSection,
                imageUploadSection,
                modeSelection,
                fileUpload
            });
            
            // 添加模式选择事件
            if (manualModeBtn) {
                manualModeBtn.addEventListener('click', function() {
                    console.log("点击了手动输入数独按钮");
                    // 设置按钮激活状态
                    manualModeBtn.classList.add('active');
                    if (imageModeBtn) imageModeBtn.classList.remove('active');
                    
                    // 隐藏模式选择区域，显示数独区域
                    if (modeSelection) modeSelection.classList.add('hidden');
                    if (sudokuSection) sudokuSection.classList.remove('hidden');
                    if (imageUploadSection) imageUploadSection.classList.add('hidden');
                    
                    // 隐藏图片预览
                    if (imagePreviewContainer) imagePreviewContainer.classList.add('hidden');
                    
                    // 隐藏图片预览区域
                    const imagePreviewWrapper = document.getElementById('imagePreviewWrapper');
                    if (imagePreviewWrapper) {
                        imagePreviewWrapper.style.display = 'none';
                    }
                    
                    // 更新模式标题
                    const modeTitle = document.getElementById('modeTitle');
                    if (modeTitle) {
                        modeTitle.textContent = '手动输入数独';
                    }
                    
                    // 显示返回首页按钮
                    const backToHomeBtn = document.getElementById('backToHomeBtn');
                    if (backToHomeBtn) backToHomeBtn.classList.remove('hidden');
                    
                    // 显示随机生成按钮
                    if (generateBtn) generateBtn.classList.remove('hidden');
                    
                    // 初始化数独网格
                    console.log("尝试初始化数独网格");
                    if (typeof initializeSudokuBoard === 'function') {
                        console.log("调用initializeSudokuBoard");
                        initializeSudokuBoard();
                    } else if (typeof createBoard === 'function') {
                        console.log("调用createBoard");
                        createBoard();
                    } else {
                        console.log("没有找到初始化函数");
                    }
                });
            }
            
            if (imageModeBtn) {
                imageModeBtn.addEventListener('click', function() {
                    console.log("点击了图片识别数独按钮");
                    // 设置按钮激活状态
                    imageModeBtn.classList.add('active');
                    if (manualModeBtn) manualModeBtn.classList.remove('active');
                    
                    // 隐藏模式选择区域，显示图片上传区域
                    if (modeSelection) modeSelection.classList.add('hidden');
                    if (imageUploadSection) imageUploadSection.classList.remove('hidden');
                    if (sudokuSection) sudokuSection.classList.add('hidden');
                    
                    // 显示图片预览区域
                    const imagePreviewWrapper = document.getElementById('imagePreviewWrapper');
                    if (imagePreviewWrapper) {
                        imagePreviewWrapper.style.display = 'flex';
                    }
                    
                    // 更新模式标题
                    const modeTitle = document.getElementById('modeTitle');
                    if (modeTitle) {
                        modeTitle.textContent = '图片识别数独';
                    }
                    
                    // 隐藏随机生成按钮
                    if (generateBtn) generateBtn.classList.add('hidden');
                });
            }
            

            
            // 文件上传处理
            if (fileUpload) {
                fileUpload.addEventListener('change', function(event) {
                    console.log("文件上传事件触发");
                    const file = event.target.files[0];
                    if (!file) return;
                    
                    // 显示上传状态
                    const statusMessage = document.getElementById('statusMessage');
                    if (statusMessage) {
                        statusMessage.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i>正在识别图片中的数独...';
                        statusMessage.className = 'status-message text-blue-600 info-message';
                    }
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        // 隐藏上传区域
                        const uploadArea = document.getElementById('uploadArea');
                        if (uploadArea) {
                            uploadArea.classList.add('hidden');
                        }
                        // 显示数独网格区域
                        if (sudokuSection) {
                            sudokuSection.classList.remove('hidden');
                        }
                        
                        // 显示返回首页按钮
                        const backToHomeBtn = document.getElementById('backToHomeBtn');
                        if (backToHomeBtn) {
                            backToHomeBtn.classList.remove('hidden');
                        }
                        
                        // 初始化数独网格
                        if (typeof initializeSudokuBoard === 'function') {
                            console.log("调用initializeSudokuBoard");
                            initializeSudokuBoard();
                        } else if (typeof createBoard === 'function') {
                            console.log("调用createBoard");
                            createBoard();
                        }
                        
                        // 显示图片预览在网格旁边
                        const imagePreviewWrapper = document.getElementById('imagePreviewWrapper');
                        const previewImageNew = document.getElementById('previewImage');
                        if (imagePreviewWrapper && previewImageNew) {
                            previewImageNew.src = e.target.result;
                            previewImageNew.style.display = 'block';
                            imagePreviewWrapper.style.display = 'flex';
                        }
                                            
                        // 隐藏上传区域的预览容器
                        if (imagePreviewContainer) {
                            imagePreviewContainer.classList.add('hidden');
                        }
                        
                        // 隐藏随机生成按钮
                        if (generateBtn) generateBtn.classList.add('hidden');
                        
                        // 使用系统已有的OCR功能处理图片
                        setTimeout(() => {
                            if (typeof ocrWithTesseract === 'function') {
                                // 使用Tesseract.js进行OCR识别
                                ocrWithTesseract(e.target.result);
                            } else if (typeof ocrWithBaidu === 'function') {
                                // 使用百度OCR进行识别
                                ocrWithBaidu(e.target.result);
                            } else {
                                // 如果没有OCR功能，使用示例数据并给出提示
                                // 示例数独数据
                                const sampleSudoku = [
                                    [5, 3, 0, 0, 7, 0, 0, 0, 0],
                                    [6, 0, 0, 1, 9, 5, 0, 0, 0],
                                    [0, 9, 8, 0, 0, 0, 0, 6, 0],
                                    [8, 0, 0, 0, 6, 0, 0, 0, 3],
                                    [4, 0, 0, 8, 0, 3, 0, 0, 1],
                                    [7, 0, 0, 0, 2, 0, 0, 0, 6],
                                    [0, 6, 0, 0, 0, 0, 2, 8, 0],
                                    [0, 0, 0, 4, 1, 9, 0, 0, 5],
                                    [0, 0, 0, 0, 8, 0, 0, 7, 9]
                                ];
                                
                                // 填充数独网格
                                fillSudokuGrid(sampleSudoku);
                                
                                if (statusMessage) {
                                    statusMessage.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i>OCR功能未找到，使用示例数据';
                                    statusMessage.className = 'status-message text-yellow-600 warning-message';
                                    // 显示提示信息区域
                                    const hintArea = document.getElementById('hintArea');
                                    if (hintArea) hintArea.classList.remove('hidden');
                                }
                            }
                        }, 100);
                    };
                    reader.readAsDataURL(file);
                });
            }
            
            // 返回首页按钮事件
            const backToHomeBtn = document.getElementById('backToHomeBtn');
            if (backToHomeBtn) {
                backToHomeBtn.addEventListener('click', function() {
                    // 隐藏数独区域
                    if (sudokuSection) {
                        sudokuSection.classList.add('hidden');
                    }
                    
                    // 隐藏图片上传区域
                    if (imageUploadSection) {
                        imageUploadSection.classList.add('hidden');
                    }
                    
                    // 隐藏图片预览容器
                    if (imagePreviewContainer) {
                        imagePreviewContainer.classList.add('hidden');
                    }
                    
                    // 隐藏返回首页按钮
                    backToHomeBtn.classList.add('hidden');
                    
                    // 显示模式选择区域
                    if (modeSelection) {
                        modeSelection.classList.remove('hidden');
                    }
                    
                    // 移除模式按钮激活状态
                    if (manualModeBtn) manualModeBtn.classList.remove('active');
                    if (imageModeBtn) imageModeBtn.classList.remove('active');
                    
                    // 显示上传区域
                    const uploadArea = document.getElementById('uploadArea');
                    if (uploadArea) {
                        uploadArea.classList.remove('hidden');
                    }
                    
                    // 隐藏图片预览在网格旁边
                    const imagePreviewWrapper = document.getElementById('imagePreviewWrapper');
                    const previewImage = document.getElementById('previewImage');
                    if (imagePreviewWrapper) {
                        imagePreviewWrapper.style.display = 'none';
                    }
                    if (previewImage) {
                        previewImage.style.display = 'none';
                    }
                    
                    // 隐藏随机生成按钮
                    if (generateBtn) generateBtn.classList.add('hidden');
                });
            }
        });
    </script>
</body>
</html>